<template>
	<!-- 我的设备页面 -->
	<div class="container">
		<NAVC title="我的设备" rightText="锦鲤算力卡"></NAVC>
		<view class="list">
			<!-- 设备 -->
			<view class="li" v-for="(item, i) in deviceList" :key="i">
				<text class="title">{{ item.title }}</text>
				<view class="content">
					<van-button :disabled="!item.unManaged" class="btn" @click="onHostingDevide(item.title)">托管</van-button>
					<text>可托管{{ item.unManaged }}台</text>
				</view>
				<image src="../../static/images/equipment/BGA.png" mode=""></image>
			</view>
			<!-- 兑换券 -->
			<view class="li">
				<text class="title">设备兑换券</text>
				<view class="content">
					<van-button class="btn" @click="onHostingExchange()">托管</van-button>
					<text>可托管{{ exchange.unusedCount }}台</text>
				</view>
				<image src="../../static/images/equipment/BGB.png" mode=""></image>
			</view>
		</view>

		<!-- 输入托管数量 -->
		<van-popup v-model:show="computerHosting" round position="bottom" :style="{ height: '70%', backgroundColor: '#222324' }">
			<view class="orderTitle">
				<h4>算力机托管</h4>
				<van-icon name="cross" class="cross" @click="popupHied" />
			</view>
			<!-- 选择设备订单 -->
			<view class="equipmentOrder">
				<view class="Remaining">
					<text>选择设备订单</text>
					<text class="greenColor">剩余{{ renderObj.unUsed }}台</text>
				</view>
				<van-field class="orderHao" v-model="equipmentOrderValue" placeholder="请输入订单号" @click="toOrderList" />
			</view>
			<!-- 锦鲤算力卡数量 -->
			<powercardNum v-model:max="renderObj.hashCards" v-model:value="useNum"></powercardNum>
			<!-- 安全密码 -->
			<SecurityCode :value="value"></SecurityCode>
			<!-- 立即购买 -->
			<view class="bottomBtn">
				<ProButton class="btn">
					<template v-slot:text>
						<view>立即托管</view>
					</template>
				</ProButton>
			</view>
		</van-popup>
		<!-- 订单列表 -->
		<van-popup v-model:show="orderListPop" round position="bottom" :style="{ height: '70%', backgroundColor: '#222324' }">
			<view class="orderTitle">
				<van-icon name="arrow-left" class="arrowLeft" @click="backspace" />
				<text>订单列表</text>
				<van-checkbox class="cross" v-model="checked" checked-color="#F7B500" @change="changeText">全选</van-checkbox>
			</view>
			<!-- 列表 -->
			<view class="list_o">
				<!-- 数据渲染订单列表 -->
				<view
					class="item_l"
					@click="clickOrderItem(item.id)"
					:style="{ border: item.colorStatus === false ? '2px solid transparent' : '2px solid rgba(247, 181, 0, 1)' }"
					v-for="item in orderDataList"
					:key="item.id"
				>
					<image src="/static/logo.png" mode=""></image>
					<view class="rightContent">
						<view class="title_t">
							{{ item.title }}
							<text>x{{ item.num }}</text>
						</view>
						<view class="typeEmpno">
							<text
								:style="
									item.type === '托管'
										? { border: '1px solid rgba(0, 208, 185, 1)', color: 'rgba(0, 208, 185, 1)' }
										: { border: '1px solid rgba(247, 181, 0, 1)', color: 'rgba(247, 181, 0, 1)' }
								"
							>
								{{ item.type }}
							</text>
							<text>订单编号{{ item.empno }}</text>
						</view>
					</view>
					<image v-show="item.colorStatus" class="posButtHook" src="/static/images/Shop/icon-sel@2x.png" mode=""></image>
				</view>
			</view>
		</van-popup>
		<!-- 托管成功展示 -->
		<PaymentSuccess
			:statePay="statusPay"
			:closeableStatus="true"
			@closePaySuccess="closePaySuccess"
			@click-close-icon="closePaySuccess({ PopupState: false, PopupName: 'statePay' })"
		>
			<template v-slot:content>
				<view class="PaymentSuccessContent">
					<view>托管成功</view>
					<view>您本次成功托管锦鲤AI算力机-K1，10台。正在装机中，预计2023年11月05日开始产生算力</view>
					<ProButton color="rgba(0, 208, 185, 1)" @click="closePaySuccess({ PopupState: false, PopupName: 'statePay' })">
						<template v-slot:text>
							<view class="ProButtonText">返回托管中心</view>
						</template>
					</ProButton>
				</view>
			</template>
		</PaymentSuccess>
	</div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import NAVC from '@/components/equipmentC/navC/index.vue';
import ProButton from '@/components/product/ProButton/index.vue';
import PaymentSuccess from '@/components/product/PaymentSuccess/index.vue';
import powercardNum from '@/components/equipmentC/powercardNum/index.vue';
import SecurityCode from '@/components/equipmentC/SecurityCode/index.vue';
import { UnmanagedOrders, getExchangeCodeAPI } from '@/api/hostingCenter';
import { hashCardsVal } from '@/api/hashCards';
import { onShow } from '@dcloudio/uni-app';

import type { Init } from '@/types/unManaged.d.ts';
// 可托管的台数
// const num = ref(1)

let renderObj = ref({
	unUsed: 0,
	hashCards: 0 // 算力卡
});
onShow(async () => {
	// 获取未托管列表
	let res = await hashCardsVal();
	renderObj.value.hashCards = (res.data.fund - 1) as number;
});

let computerHosting = ref<boolean>(false);

const deviceList = ref<Init[]>([]);

onShow(async () => {
	// 获取未托管列表
	let res = await UnmanagedOrders();
	deviceList.value = res.data.reduce((init: Init, current) => {
		const el = init.find((el: any) => el.title === current.productName);
		if (el) {
			el.unManaged += current.unManaged;
			el.managed += current.count - current.unManaged;
		} else {
			init.push({
				title: current.productName,
				unManaged: current.unManaged,
				managed: current.count - current.unManaged
			});
		}
		return init as Init;
	}, []);
});

const onHostingDevide = (title: string) => {
	computerHosting.value = true;
	deviceList.value.forEach((item) => {
		if (item.title === title) {
			renderObj.value.unUsed = item.unManaged;
		}
	});
};

const exchange = ref({
	unusedCount: 0,
	usedCount: 0
});
onShow(async () => {
	// 获取用户兑换券
	let res = await getExchangeCodeAPI();
	exchange.value = res.data;
});
const onHostingExchange = () => {
	computerHosting.value = true;
	renderObj.value.unUsed = exchange.value.unusedCount;
};

const useNum = ref(1);

let orderListPop = ref<boolean>(false);
let equipmentOrderValue = ref<string>('订单140589380942');
// 安全密码
let value = ref<string>('123456');
// 用来存储渲染的对象
// 全选
let checked = ref<boolean>(false);
// 订单数据列表
const orderDataList = ref<Array<any>>([
	{ id: 'i_1', title: '锦鲤AI算力机-K1', num: 1, type: '托管', empno: '2456874975', colorStatus: false },
	{ id: 'i_2', title: '锦鲤AI算力机-K1', num: 10, type: '托管', empno: '2456874912', colorStatus: false },
	{ id: 'i_3', title: '锦鲤AI算力机-K1', num: 1, type: '托管', empno: '2456874944', colorStatus: false },
	{ id: 'i_4', title: '锦鲤AI算力机-K1', num: 1, type: '托管', empno: '2456874922', colorStatus: false },
	{ id: 'i_5', title: '锦鲤AI算力机-K1', num: 11, type: '托管', empno: '2456874989', colorStatus: false },
	{ id: 'i_6', title: '锦鲤AI算力机-K1', num: 1, type: '设备兑换券', empno: '2456874900', colorStatus: false },
	{ id: 'i_7', title: '锦鲤AI算力机-K1', num: 2, type: '设备兑换券', empno: '2456874903', colorStatus: false }
]);
// 传递给托管成功弹出层的控制器
let statusPay = ref<boolean>(false);
// 用来存放选中的数组
let selectArr = ref<Array<any>>([]);

// 关闭
const popupHied = () => {
	computerHosting.value = false;
};
// 托管方式

// 显示订单列表回调
const toOrderList = () => {
	orderListPop.value = true;
	computerHosting.value = false;
};
// 全选功能
const changeText = (e: boolean) => {
	// console.log(e)
	orderDataList.value.forEach((item) => {
		if (e === true) {
			item.colorStatus = true;
			selectArr.value = [...selectArr.value, item];
			console.log(selectArr.value);
		} else {
			item.colorStatus = false;
			selectArr.value = [];
		}
	});
};
// 点击订单选中回调
const clickOrderItem = (id: string) => {
	orderDataList.value.forEach((item) => {
		if (item.id === id) {
			item.colorStatus = !item.colorStatus;
			if (item.colorStatus === true) {
				// selectArr.value.push(item) // 为true的添加进去
				selectArr.value = [...selectArr.value, item];
				console.log(selectArr.value, 'true');
			} else {
				selectArr.value.forEach((item1, index) => {
					if (item1.id === item.id) {
						selectArr.value.splice(index, 1);
						// console.log(selectArr.value, 111111)
					}
				});
				console.log(selectArr.value, 'false');
			}
		}
	});
};
// 回调上一页
const backspace = () => {
	orderListPop.value = false; // 隐藏订单列表
	computerHosting.value = true; // 显示算力机托管
	// 控制托管成功是否该出现
	if (selectArr.value.length > 0) {
		statusPay.value = true;
	} else {
		statusPay.value = false;
	}
	changeText(false);
	checked.value = false;
};
// 关闭托管成功
const closePaySuccess = (data: any) => {
	if ((data.PopupName = 'statePay')) {
		statusPay.value = data.PopupState;
		computerHosting.value = false;
	}
	selectArr.value = [];
};
</script>

<style lang="scss" scoped>
::v-deep .van-icon {
	line-height: 32px;
	width: 32px;
	height: 32px;
}

::v-deep .van-icon-success {
	border: 1px solid rgba(247, 181, 0, 1);
}

::v-deep .van-checkbox__label {
	color: #f7b500;
	margin-top: 12px;
}

::v-deep .van-checkbox {
	display: flex;
	align-items: center;
	height: 88px;
}

::v-deep .van-field {
	height: 88px;
	background: rgba(255, 255, 255, 0.1);
	border: 2px solid rgba(255, 255, 255, 0.6);
	border-radius: 16px;
	color: #fff;
}

::v-deep .van-field__control {
	color: #fff !important;
	line-height: 66px !important;
	text-align: center;
}

::v-deep .van-popup {
	border-radius: 40px;
}

::v-deep .van-nav-bar__right,
::v-deep .van-nav-bar__left {
	background: none !important;
}

.container {
	position: relative;
	height: 100vh;
	background: #111317;

	.orderTitle {
		position: relative;
		width: 91%;
		height: 97px;
		color: #fff;
		text-align: center;
		line-height: 97px;
		// padding: 24px 0;
		font-size: 32px;
		margin: 0 auto;
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);

		& > h4 {
			font-weight: normal;
		}

		.cross {
			position: absolute;
			top: 50%;
			right: 5%;
			transform: translateY(-50%);
		}

		.arrowLeft {
			position: absolute;
			top: 50%;
			left: 5%;
			transform: translateY(-50%);
		}
	}

	.equipmentOrder {
		width: 91%;
		margin: 40px auto 0 auto;
		color: #fff;
		font-size: 24px;

		.Remaining {
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin: 0 0 16px 0;

			.greenColor {
				color: rgba(0, 208, 185, 1);
			}
		}

		.steep {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			--van-stepper-input-font-size: 28px;
		}
	}

	.bottomBtn {
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 112px;
		background: rgba(18, 19, 23, 1);
		border-top: 1px solid gray;

		.btn {
			width: 280px;
			height: 80px;
			font-size: 28px;
			color: rgba(18, 19, 23, 1);
			font-weight: bold;
			border-radius: 16px;
			background: linear-gradient(to right, rgba(6, 255, 221, 1), rgba(78, 71, 255, 1));
		}
	}

	.list {
		padding: 40px 32px;
		box-sizing: border-box;
		height: calc(100vh - 88px);

		.li {
			position: relative;
			margin-bottom: 32px;
			width: 100%;
			height: 240px;
			// background-image: url('../../static/images/equipment/BGA.png');
			background-size: 100% 100%;

			.title {
				z-index: 2;
				position: absolute;
				top: 52px;
				left: 48px;
				width: 307px;
				height: 56px;
				font-size: 40px;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #ffffff;
				line-height: 56px;
			}

			image {
				position: absolute;
				top: 0;
				left: 0;
				z-index: 1;
				width: 100%;
				height: 100%;
			}

			.content {
				z-index: 2;
				position: absolute;
				left: 48px;
				bottom: 38px;
				display: flex;
				align-items: center;

				.btn {
					width: 128px;
					height: 56px;
					font-weight: 600;
					color: #121317;
					font-size: 24px;
					background: linear-gradient(151deg, #06ffdd 0%, #4e47ff 100%);
					box-shadow: 0px 4px 4px 0px #121317;
					border-radius: 8px;
					border: 0;
				}

				text {
					font-size: 26px;
					color: #00d0b9;
					margin-left: 16px;
				}
			}
		}
	}
}

.list_o {
	width: 91%;
	height: 85%;
	overflow-y: scroll;
	margin: 32px auto 0 auto;
	// background: red;

	.item_l {
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: space-evenly;
		width: 98%;
		font-size: 32px;
		background: rgba(210, 208, 255, 0.2);
		padding: 24px 0;
		border-radius: 16px;
		margin-bottom: 24px;

		.posButtHook {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 56px;
			height: 56px;
		}

		image {
			width: 136px;
			height: 136px;
		}

		.rightContent {
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			width: 60%;

			.title_t {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				color: #fff;
			}

			.typeEmpno {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				font-size: 24px;

				& > text:nth-of-type(1) {
					border-radius: 16px;
					padding: 2px 8px;
				}

				& > text:nth-of-type(2) {
					color: rgba(255, 255, 255, 0.5);
				}
			}
		}
	}
}

.PaymentSuccessContent {
	color: #fff;

	& > view:nth-of-type(1) {
		font-size: 40px;
	}

	& > view:nth-of-type(2) {
		font-size: 28px;
		margin: 32px 0 40px 0;
	}

	.ProButtonText {
		font-size: 28px;
		color: rgba(34, 35, 36, 1);
		font-weight: 600;
	}
}
</style>
